<template>
    <div class="box">
        <div class="icon">
            <van-icon name="chat-o" />
            <van-icon name="setting-o" />
        </div>
        <div class="out">
            <div class="my">
                <van-uploader v-model="fileList" multiple :max-count="1" :deletable="false" />
                <div>
                    <p>用户名</p>
                    <p>班级</p>
                </div>
            </div>
            <van-icon name="arrow" />
        </div>
        <div class="center">
            <ol>
                <li v-for="item in icons" :key="item.id" @click="jumps($event, item.id)">
                    <img :src="item.url" alt="">
                    <p>{{ item.title }}</p>
                </li>
            </ol>
        </div>
        <ul class="green" @click="jump($event)">
            <li>
                <div><van-icon name="map-marked" /><span>收获地址</span></div>
                <van-icon name="arrow" />
            </li>
            <li>
                <div><van-icon name="upgrade" /><span>上传日志</span></div>
                <van-icon name="arrow" />
            </li>
            <li>
                <div><van-icon name="question" /><span>帮助中心</span></div>
                <van-icon name="arrow" />
            </li>
            <li class="orange">
                <div><van-icon name="warning" /><span>投诉举报</span></div>
                <van-icon name="arrow" />
            </li>
            <li class="orange">
                <div><van-icon name="link-o" /><span>我的班级</span></div>
                <van-icon name="arrow" />
            </li>
            <li class="blue">
                <div><van-icon name="edit" /><span>意见反馈</span></div>
                <van-icon name="arrow" />
            </li>
        </ul>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getBanner } from '@/api/banner'
import type { Ref } from 'vue'
const fileList = ref([])
const router = useRouter()
function jump(e: Event) {
    const target = e.target as HTMLElement
    const span = target.querySelector('span')
    const p = target.querySelector('p')
    if (span?.innerText === '收获地址') {
        router.push('/my/location')
    } else if (span?.innerText === '上传日志') {
        router.push('/my/upload')
    } else if (span?.innerText === '帮助中心') {
        router.push('/my/help')
    } else if (span?.innerText === '投诉举报') {
        router.push('/my/complaint')
    } else if (span?.innerText === '我的班级') {
        router.push('/my/evaluate')
    } else if (span?.innerText === '意见反馈') {
        router.push('/my/opinion')
    }
}
function jumps(e: Event, id: any) {
    if (e.target) {
        router.push(`/my/${id}`)
    }
}
interface BannerIcon {
    url: string
    id: number
    title: string
}
let icons: Ref<Array<BannerIcon>> = ref<Array<BannerIcon>>([])
onMounted(async () => {
    const { data } = await getBanner()
    icons.value = data.data.icons
})
</script>
<style setup lang="scss">
.van-icon {
    margin: 0 10px;
}

.box {
    .green {
        div {
            .van-icon {
                color: #55c0ae;
            }
        }
    }

    ol {
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        img {
            width: 45px;
        }
    }

    ul {
        margin: 10px 0;

        .van-icon {
            margin-right: 4px;
            font-size: 20px;
            color: #ccc;
        }

        .orange {
            div {
                .van-icon {
                    color: #f2c16e;
                }
            }
        }

        .blue {
            div {
                .van-icon {
                    color: #b1def3;
                }
            }
        }
    }

    ul>li {
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
    }

    .center {
        margin: 10px 0;
        display: flex;
        justify-content: space-between;

        div {
            text-align: center;
        }
    }
}

.icon {
    margin: 10px;
    text-align: right;
    color: #333;
    font-size: 20px;

    .van-icon {
        margin: 0 5px;
        font-weight: bold;
    }
}

.out {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .van-icon {
        margin-right: 4px;
        font-size: 20px;
        color: #ccc;
    }

    .my {
        display: flex;
    }
}

.center {
    .van-grid {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}

.van-uploader {
    --van-uploader-border-radius: 50%
}
</style>